<template>
  <div class="main" >
    <el-col :xs="8" :sm="8" :md="8" :lg="9" :xl="11" :offset="8">
      <div class="login">
        <div class="login-item">
          <h2 align="center"><b>超市收银系统</b></h2>
        </div>
        <div class="login-item">
          <div class="left">
            <b>卡号：</b>
          </div>
          <div class="right">
            <el-input
              :class="[vc ? 'inputerr' : '']"
              placeholder="请输入卡号或刷卡"
              v-model.number="loginData.rfid"
              clearable
              @blur="verifyCard"
              @focus="fcard"
            >
            </el-input>
            <p class="verr" v-show="vc">{{ vcm }}</p>
          </div>
        </div>
        <div class="login-item">
          <div class="left">
            <b>密码：</b>
          </div>
          <div class="right">
            <el-input
              :class="[vp ? 'inputerr' : '']"
              placeholder="请输入密码"
              v-model.number="loginData.pwd"
              @blur="verifyPassword"
              @focus="fpassword"
              show-password
            >
            </el-input>
            <p class="verr" v-show="vp">{{ vpm }}</p>
          </div>
        </div>
        <div class="login-item">
          <div class="right">
            <el-button
              type="primary"
              @click="login"
              plain
              style="background-color: blueviolet"
              :disabled="isDisabled"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDisabled:false,
      loginData: {
        rfid: "",
        pwd: "",
      },
      vc: false, //显示卡号验证信息窗口
      vp: false, //显示密码验证信息窗口
      vcm: "", //存放卡号验证信息
      vpm: "", //存放密码验证信息
    };
  },
  methods: {
    verifyCard() { 
          let validateBankCard = /^([1-9]{1})(\d{14}|\d{18})$/;
      if (!this.loginData.rfid) {
        this.vcm = "请输入卡号";
        this.vc = true;
        return false;
      // } else {
      //   return true;
      // }
          }else if(!validateBankCard.test(this.loginData.rfid)){
              this.vcm='输入卡号格式错误，请重新输入';
              this.vc=true;
              return false;
          }else{
              return true;
          }
    },
    fcard() {
      this.vc = false;
    },
    verifyPassword() {
      //  setTimeout( ()=> {
      if (!this.loginData.pwd) {
        this.vpm = "请输入密码";
        this.vp = true;
        return false;
      } else {
        return true;
      }
      // }, 200 )
    },
    fpassword() {
      this.vp = false;
    },
    login() {
      // 什么是登录  将账户和密码 通过ajax 发送给后端
      // 后端告诉我登录是否成功  如果成功将用户信息返回给我 用户信息应该保存在哪里
      // 这里就改变的是vue的视图  在视图通过dispatch去触发actions里的方法
      // this.$store.dispatch(aciton里函数名, 这个函数需要的参数) 
      if (this.verifyCard() && this.verifyPassword()) {
        this.$store.dispatch("loginUser", this.loginData);
      } else {
        this.$message({
          message: "请完善信息",
          type: "error",
        });
      }
      this.isDisabled=true;
      setTimeout(()=>{
        this.isDisabled=false;
      },3000)
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  background: url(../assets/bg2.jpg);
  // background-size:cover;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-col {
  border-radius: 4px;
  height: 450px;
  margin-top: 120px;
}
.login {
  height: 80%;
  margin: 5% 15%;
  padding: 5% 10%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.06);
  border-radius: 4%;
  background-color: rgba(255, 255, 255, 0.6);
}
.login-item {
  width: 100%;
  height: 23%;
  margin: 0;
  padding: 0;
  margin-bottom: 2%;
}
.left {
  width: 16%;
  height: 100%;
  line-height: 40px;
  float: left;
}
.right {
  width: 84%;
  height: 100%;
  float: right;
}
.el-input {
  width: 85%;
}
.type {
  line-height: 40px;
}
.el-button {
  width: 85%;
}
.inputerr {
  border: 1px solid #ff5940;
  border-radius: 4px;
}
.verr {
  color: #ff5940;
}
</style>